<!-- 聊天框 组件 -->
<template>
	<view class="animate__animated animate__fadeIn">
		<!-- 时间 -->
		<view v-if="shortTime"
		class="py-2 flex align-center justify-center font-sm text-light-muted">
			{{shortTime}}
		</view>
		<!-- 消息气泡 -->
		<view class="flex align-center px-2 my-2" :style="isSelf?'flex-direction:row-reverse' : ''">
			<image 
			:src="item.avatar?item.avatar:'/static/demo/userpic/4.jpg'"
			 style="width:100rpx;height: 100rpx;" class="rounded-circle bg-secondary"></image>
			<!-- 聊天发送的消息 -->
			<view class="bg-light p-2 rounded mx-2" style="max-width: 400rpx;min-width:100rpx;">
				{{ item.data }}
			</view>
		</view>
	</view>
	
</template>

<script>
	import $T from '@/common/time.js'
	export default {
		props: {
			item: Object,
			index: Number,
			pretime:[Number,String]
		},
		// 计算属性
		computed:{
			// 判断是否 是登录用户本人
			isSelf(){
				let myId =this.$store.state.user.id;
				return myId === this.item.user_id
			},
			// 转化时间
			shortTime(){
				// (当前消息的时间，上一条消息的时间)
				return $T.getChatTime(this.item.create_time,this.pretime)
			}
		},
		
	};
</script>

<style></style>
